<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium App</title>
    <script src="./scripts/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">
    <style>
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>
    <div id="cseiumContainer" style="height: 100%;"></div>
    <script>
        //石家庄离线瓦片地图
        var ShiJiaZhuang = new Cesium.UrlTemplateImageryProvider({
            url: "./map/googlemaps/roadmap/{z}/{x}/{y}.png",
            fileExtension: "png"
        })
        // 创建viewer
        var viewer = new Cesium.Viewer("cseiumContainer", {
            geocoder: false,
            sceneModePicker: false,
            navigationHelpButton: false,
            homeButton: false,
            baseLayerPicker: false,
            fullscreenButton: false,
            imageryProvider: ShiJiaZhuang
        });


        /* 
        场景设置
        */
        // 开启全球光照
        viewer.scene.globe.enableLighting = true;
        //设置视角
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(114.71195, 38.35195, 300000.0), //经纬度,高度
            orientation: {
                heading: Cesium.Math.toRadians(0.0), // 左右视角,0为正北
                pitch: Cesium.Math.toRadians(-90), // 上下视角,0为平视
                roll: 0.0
            }
        });
        /* 
        时间设置
        */
        // 设置时钟和时间线
        var rate = 720
        viewer.clock.shouldAnimate = true; // 当viewer开启后，启动动画
        viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2018-08-12T09:06:00Z"); //开始时间
        viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2018-08-12T18:00:00Z"); //结束时间
        viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2018-08-12T09:06:00Z"); //初始化时间指针
        viewer.clock.multiplier = rate; // 设置加速倍率,每秒2张图
        viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环播放
        viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // 设置时间的可见范围
        var originTime = viewer.clock.startTime.secondsOfDay
        /* 
        绘制雷达图
         */
        //贴图位置
        var positions = [
            Cesium.Cartesian3.fromDegrees(113.103400, 37.090700),
            Cesium.Cartesian3.fromDegrees(116.320500, 37.090700),
            Cesium.Cartesian3.fromDegrees(116.320500, 39.613200),
            Cesium.Cartesian3.fromDegrees(113.103400, 39.613200)
        ];
        for (i = 0; i < 90; i++) {
            viewer.entities.add({
                id: String(i),
                polygon: {
                    hierarchy: new Cesium.PolygonHierarchy(positions),
                    material: './images/dbz/' + i + ".png",
                },
                show: false
            });
        }
        var entity = viewer.entities.getById("0");
        entity.show = true
        var showing = "0"
        var refresh_interval = 0.5

        function refresh() {
            var currentTime = viewer.clock.currentTime.secondsOfDay
            var passTime = currentTime - originTime
            var thisShowing = parseInt(passTime / rate / refresh_interval)
            thisShowing = thisShowing >= 0 ? thisShowing : 239 + thisShowing
            thisShowing = String(thisShowing)
            // console.log("开始刷新")
            // console.log(thisShowing)
            if (thisShowing != showing) {
                viewer.entities.getById(thisShowing).show = true
                viewer.entities.getById(showing).show = false
                showing = thisShowing
            }
        }
        setInterval("refresh()", String(refresh_interval * 1000));
    </script>
</body>

</html>